<template>
  <view class="banner-swiper">
    <swiper
      class="swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="4000"
      :duration="500"
      circular
    >
      <swiper-item v-for="(item, idx) in images" :key="idx">
        <image class="banner-img" :src="item" mode="aspectFill" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
const props = defineProps({
  images: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="scss" scoped>
.banner-swiper {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
  overflow: hidden;
  margin: 0 auto 24rpx auto;

  .swiper {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
  }

  .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16rpx;
  }
}
</style> 